<template>
    <div class="zong">
        <table>
            <tr>
                <td colspan="14">牌库剩余 <span>{{ total - numpai }} 张</span></td>
            </tr>
            <tr class="trcolor">
                <td v-for="(item,index) in puke" :key="index">{{ item }}</td>
            </tr>
            <tr>
                <td v-for="(item,index) in numlist" :key="index">{{ item }}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    props:["puke","numpai"],
    data(){
        return {
            numlist:[4,4,16,16,16,16,16,16,16,16,16,16,16,16],
            total:192
        }
    },
    mounted(){
        console.log(this.$parent.getValue());
    }
}
</script>

<style lang="less" scoped>
.zong {
    height: 150px;
    background-color: rgba(222, 146, 46, 0.772);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    table{
        .trcolor{
            td:first-child{
                color: red;
            }
        }
        tr{
            td{
                width: 40px;
                height: 45px;
                border: 1px solid black;
                font-size: 26px;
            }
        }
    }
}
</style>